﻿<Page
    x:Class="CodeAbility.MonitorAndCommand.Windows8Monitor.Pages.Photons"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CodeAbility.MonitorAndCommand.Windows8Monitor"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting" 
    xmlns:converters="using:CodeAbility.MonitorAndCommand.Windows8Monitor.Converters"
    xmlns:usercontrols="using:CodeAbility.MonitorAndCommand.Windows8Monitor.UserControls"
    mc:Ignorable="d">

    <Page.Resources>
        <converters:ConnectedToStringConverter x:Key="ConnectedToString"/>
        <converters:BooleanToBrushConverter x:Key="BooleanToBrush"/>
        <converters:BooleanToOpacityConverter x:Key="BooleanToOpacity"/>
        <converters:VoltageToOpacityConverter x:Key="VoltageToOpacity"/>
        <Style x:Key="DevicesLegendStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style x:Key="PhotonsLegendStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="FontSize" Value="28"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style x:Key="PhotonsSubLegendStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <Grid Grid.Column="0" Margin="20,10,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0" VerticalAlignment="Bottom">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" 
                            Text="Status" 
                            Style="{StaticResource DevicesLegendStyle}"/>
                <TextBlock Grid.Column="1" 
                            Text="In" 
                            Style="{StaticResource DevicesLegendStyle}"/>
                <TextBlock Grid.Column="2"                      
                            Text="Out" 
                            Style="{StaticResource DevicesLegendStyle}"/>
                <TextBlock Grid.Column="3"                       
                            Text="Device" 
                            HorizontalAlignment="Left" Margin="10,0"
                            Style="{StaticResource DevicesLegendStyle}"/>
            </Grid>

            <ListView Grid.Row="1"  
                    ItemsSource="{Binding DeviceModels}"                     
                    HorizontalAlignment="Center"  
                    VerticalAlignment="Top"
                    Background="Transparent">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <usercontrols:DeviceDataUserControl />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </Grid>

        <Grid Grid.Column="1" Margin="10,10,20,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="*"/>           
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="150"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="Photon" Style="{StaticResource PhotonsLegendStyle}"/>
                <TextBlock Grid.Column="1" Text="Temperature" Style="{StaticResource PhotonsLegendStyle}"/>
                <TextBlock Grid.Column="2" Text="Humidity" Style="{StaticResource PhotonsLegendStyle}"/>
                <TextBlock Grid.Column="3" Text="LEDs" Style="{StaticResource PhotonsLegendStyle}"/>

                <TextBlock Grid.Column="1" Text="c°" Style="{StaticResource PhotonsSubLegendStyle}"/>
                <TextBlock Grid.Column="2" Text="%" Style="{StaticResource PhotonsSubLegendStyle}"/>
            </Grid>

            <usercontrols:PhotonUserControl Grid.Row="1" 
                                            HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                            DataContext="{Binding PhotonAModel}"></usercontrols:PhotonUserControl>
            <usercontrols:PhotonUserControl Grid.Row="2" 
                                            HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                            DataContext="{Binding PhotonBModel}"></usercontrols:PhotonUserControl>
            <usercontrols:PhotonUserControl Grid.Row="3" 
                                            HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                            DataContext="{Binding PhotonCModel}"></usercontrols:PhotonUserControl>
            <usercontrols:PibrellaUserControl Grid.Row="4" DataContext="{Binding PibrellaModel}"
                                              HorizontalAlignment="Center" VerticalAlignment="Center">
            </usercontrols:PibrellaUserControl>
        </Grid>
    </Grid>
</Page>